<template>
  <router-layout>
    <div class="body">
      <!-- <TitleItem v-if="this.wx==true"></TitleItem> -->
      <div class="banner">
        <img :src="datainfo.file_path" width="100%" alt>
      </div>
      <div class="voteNum">
        <div class="poll">
          <p class="number">{{ weekList.length || 0 }}</p>
          <div class="flex">
            <img src="https://gw.alicdn.com/tfs/TB19VdqOjTpK1RjSZKPXXa3UpXa-40-40.png" alt>
            <p>参赛者</p>
          </div>
        </div>
        <div class="pothunter">
          <p class="number">{{ datainfo.voteRecordSize || 0 }}</p>
          <div class="flex">
            <img src="https://gw.alicdn.com/tfs/TB1vOhgOgDqK1RjSZSyXXaxEVXa-40-40.png" alt>
            <p>投票数</p>
          </div>
        </div>
      </div>
      <div class="time">
        <div class="time-over van-hairline--top">
          <span class="time-name">投票将于：</span>
          <span class="time-date">{{ datainfo.vote_endtime | formate_date }}</span>
          <span style="font-size: 12px;color: #a0a0a0;">结束</span>
        </div>
        <div class="time-roul van-hairline--top">
          <span class="time-name">投票规则：</span>
          <span class="roul">
            <!-- 每个用户每天只能投 -->
            <i style=" color: #01a0ef; padding:0 2px;">{{ datainfo.vote_rule }}</i>
          </span>
        </div>
      </div>
      <div class="person">
        <div class="search">
          <form action="/">
            <van-search
              v-model="searchInfo.search_value"
              placeholder="请输入选手编号/名称"
              @search="seachContent"
              @clear="onCancel"
            />
          </form>
          <!-- <img src="./../../../static/img/toupiao/search.png" alt>
          <form action="javascript:return true" onsubmit="return false;">
            <input
              type="search"
              @keyup.13="seachContent"
              ref="input1"
              v-model="searchInfo.search_value"
              placeholder="请输入选手编号/名称"
            >
          </form>-->
        </div>
        <div class="link" @click="opneLink1">
          <img src="https://gw.alicdn.com/tfs/TB11_0NOhjaK1RjSZKzXXXVwXXa-48-48.png" alt>
          <p>投票规则</p>
        </div>
        <div class="list">
          <div class="list-detail" v-for="(item, index) in weekList" :key="index">
            <div class="img-box" @click="openLink(item)">
              <img class="image" :src="item.file_path" alt>
              <div class="content" v-if="item.option_desc">
                <p class="txt-cut">{{ item.option_desc }}</p>
              </div>
            </div>
            <div class="vote-detail">
              <div class="vote-left">
                <p>
                  投票数：
                  <span style="color:#01A0EF">{{ item.record_nums || 0 }}</span>
                </p>
                <p>
                  编号：
                  <span style="color:#FF894B">{{ item.option_code || 0 }}</span>
                </p>
              </div>
              <div v-if="!item.isvoted" class="vote-right" @click="apply(item)">
                <p>投票</p>
              </div>
              <div v-if="item.isvoted == 1" class="vote-right2">
                <p>已投票</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </router-layout>
</template>
<script>
import { vote_findById, vote_addBrowseNum } from "@/api/vote";
import { voteRecord_save } from "@/api/voteRecord";
import moment from "moment";
import TitleItem from "../../components/public/title/title";
export default {
  name: "VoteTypeThree",
  components: { TitleItem },
  data() {
    return {
      isShow: false,
      datainfo: {},
      weekList: [],
      listQuery: {},
      searchInfo: {}
    };
  },
  filters: {
    formate_date(v) {
      return moment(v).format("YYYY 年 MM 月 DD 日 HH 时 mm 分 ss 秒");
    }
  },
  methods: {
    //取消搜索
    onCancel() {
      this.initList();
    },
    //跳转到个人详情页
    openLink(item) {
      item.select_nums = this.datainfo.select_nums;
      this.$router.push({
        path: "/VoteMess",
        query: {
          id: this.$route.query.id,
          content: item
        }
      });
    },
    //跳转到投票规则页面
    opneLink1() {
      this.$router.push({
        path: "/VoteRoul",
        query: {
          id: this.$route.query.id
        }
      });
    },
    //搜索功能
    seachContent() {
      this.initList();
    },
    apply(item) {
      // if (this.datainfo.isvote == 1) {
      //   this.$toast("您已经投票过该参赛者");
      //   return;
      // }
      let user = JSON.parse(localStorage.getItem("user"));
      this.listQuery = {
        vote_id: item.vote_id,
        vote_optionid: item.id,
        user_id: user.id,
        select_nums: this.datainfo.select_nums,
        company_id: localStorage.getItem("companyId") - 0,
        time: new Date()
      };
      this.$dialog
        .confirm({
          message: "每个参赛者只能投票一次,您确定要投票吗?"
        })
        .then(() => {
          this.saveObj();
        })
        .catch(() => {});
    },
    async saveObj() {
      try {
        let query = Object.assign(this.listQuery);
        let res = await voteRecord_save(query);
        let result = res.data;
        if (result.status == 100) {
          this.$toast.success("投票成功");
          this.initList();
        }
      } catch (error) {
        if (error.data.status == 101) {
          this.$toast.fail(error.data.msg);
        }
      }
    },
    async oneBrowse() {
      let query = Object.assign(
        { id: this.$route.query.id },
        { company_id: localStorage.getItem("companyId") - 0 }
      );
      let res = await vote_addBrowseNum(query);
      let result = res.data;
      if (result.status == 100) {
      } else {
      }
    },
    //获取数据
    async initList() {
      let query = Object.assign(
        {},
        this.searchInfo,
        { id: this.$route.query.id },
        { company_id: localStorage.getItem("companyId") - 0 }
      );
      let res = await vote_findById(query);
      let result = res.data;
      if (result.status == 100) {
        this.datainfo = result.data;
        this.weekList = result.data.voteOptions;
      }
    }
  },
  created() {
    this.initList();
    this.oneBrowse();
  }
};
</script>
<style lang="scss" scoped>
@import "VoteTypeThree";
</style>
